<template>
  <div ref="charts" :class="className" :style="{height:canvasHeight,width:width}"/>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '@/utils'

  // import {getVirtulData, getPieSeries, getPieSeriesUpdate} from '@/utils/pieChart'

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '500px'
      },
      datas: {
        default: 123
      },
      range: {
        type: Array,
        default: () => {
          return []
        }
      },
      adPlaceList: {
        type: Array,
        default: () => {
          return []
        }
      },
      color: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        chart: null,
        cellSize0: null,
        size: null,
        canvasHeight: '650px'
      }
    },
    computed: {
      options() {
        return {
          tooltip: {
            axisPointer: {
              type: 'cross'
            },
            showContent: false,
          },
          legend: {
            data: this.adPlaceList,
            bottom: 10
          },
          color:this.color,
          calendar: {
            top: 'middle',
            left: 'center',
            orient: 'vertical',
            cellSize: this.cellSize,
            yearLabel: {
              show: false,
              textStyle: {
                fontSize: 30
              }
            },
            dayLabel: {
              margin: 20,
              firstDay: 1,
              textStyle: {
                fontSize: 16,
                color:'#666'
              },
              nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            },
            monthLabel: {
              show: false
            },
            silent: false,
            splitLine: false,
            range: this.range
          },
          series: [{
            id: 'label',
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 1,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return echarts.format.formatTime('dd', params.value[0])
                },
                offset: [-this.cellSize[0] / 2 + 10, -this.cellSize[1] / 2 + 10],
                textStyle: {
                  color: '#000',
                  fontSize: 14
                }
              }
            },
            data: this.datas
          }]
          // series: this.getPieSeriesUpdate(this.datas, this.chart)
        }
      },
      cellSize() {
        const size = this.$el.clientWidth / 10;
        return this.cellSize0 || [size, size]
      },
      pieRadius() {
        return this.radius
      },
      radius() {
        if (this.size) {
          return this.size * 2 / 7
        } else {
          return this.$refs.charts.clientWidth / 10 * 2 / 7
        }
      }
    },
    watch: {
      datas(val1, val2) {
        if (this.chart) {
          this.chart.setOption(this.options)
          this.chart.setOption({series: this.getPieSeries(this.datas, this.chart)})
        }
      },
    },
    mounted() {
      this.initChart(this.options)
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.computeCellSize();
          this.chart.resize()
          // console.log('resize');
          this.chart.setOption(this.options)
          console.log(this.chart);
          this.chart.setOption({
            series: this.getPieSeriesUpdate(this.datas, this.chart)
          })
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)

      this.chart.on('click', this.onChartSelected)
      this.chart.on('mouseover', (params) => {
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: params.seriesIndex,
          // dataIndex: params.dataIndex
        })
      })
      this.chart.on('mouseout', (params) => {
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: params.seriesIndex,
          // dataIndex: params.dataIndex
        })
      })

    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      computeCellSize() {
        // const size = (this.$el.clientWidth < 900 ? this.$el.clientWidth : 900) / 8;
        const size = this.$el.clientWidth / 10;
        this.cellSize0 = [size, size];
        this.size = size;
        // this.canvasHeight = this.$el.clientWidth*.8
        this.$el.style.height = this.$el.clientWidth * .61 + 'px';
      },
      initChart(options) {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption(options)

        this.chart.setOption({series: this.getPieSeries(this.datas, this.chart)})
      },
      onChartSelected(val) {
        console.log(val);
        const orderDetails = []
        this.datas[val.seriesIndex - 1][2].forEach(item => {
          if (item.key) {
            orderDetails.push(item.key)
          }
        })
        this.$emit('onChartSelected', orderDetails)
      },

      getPieSeries(scatterData, chart) {
        let that = this;
        return echarts.util.map(scatterData, function (item, index) {
          var center = chart.convertToPixel('calendar', item)
          return {
            id: index + 'pie',
            type: 'pie',
            center: center,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              formatter: '{b}',
              position: 'inner',
              textBorderWidth: 0
            },
            color:item[2].color,
            graphic: {
              type: 'ring'
            },
            radius: that.pieRadius,
            data: item[2]
          }
        })
      },
      getPieSeriesUpdate(scatterData, chart) {
        const that = this
        return echarts.util.map(scatterData, function (item, index) {
          var center = chart.convertToPixel('calendar', item)
          return {
            id: index + 'pie',
            center: center,
            radius: that.pieRadius,
          }
        })
      }
    }
  }
</script>
